<template>
  <div class="wrapper">
    <div class="list">
      <MeiziComponent
        v-for="(item, index) of meiziList"
        :key="index"
        :meizi="item"/>
    </div>
    <div class="pager">
      <button @click="loadMore">加载更多</button>
    </div>
  </div>
</template>

<script>
import MeiziComponent from "@/components/MeiziComponent";
import axios from "axios";
export default {
  name: 'GanHuo',
  components: {
    MeiziComponent
  },
  data() {
    return {
      meiziList: [],
      page: 1
    }
  },
  created() {
    console.log(this)
    axios({
      url: 'https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/10'
    }).then(res => {
      this.meiziList = res.data.data
    })
  },
  mounted() {
    // document.body.style.backgroundColor = 'red'
    window.onscroll = document.body.onscroll = document.documentElement.onscroll = function () {
      console.log(document.documentElement.scrollTop)
    }
  },
  methods: {
    loadMore() {
      this.page++

      axios({
        url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/${this.page}/count/10`
      }).then(res => {
        // this.meiziList = this.meiziList.concat(res.data.data)
        this.meiziList = [...this.meiziList, ...res.data.data]
      })
      // console.log(this.page)
    }
  }
}
</script>

<style lang="less">
.wrapper {
  width: 400px;
  margin: 0 auto;
  border: 2px solid #42b983;

  .pager {
    padding: 20px;
    text-align: center;

    button {
      font-size: 20px;
    }
  }
}
</style>

